<!-- 巡护规则 -->
<script setup>
import { reactive, toRefs, ref, watch } from 'vue';
import { ElForm, ElFormItem, ElInputNumber, ElRadioGroup, ElRadio, ElMessageBox } from 'element-plus';
import CommonMapModal from '@/common/CommonMapModal.vue';

const props = defineProps({
  showModalRules: Boolean,
  patrolRule: Object,
});
const { showModalRules, patrolRule } = toRefs(props);
const emit = defineEmits(['handleShowModalRules', 'GetRuleInfo']);
const formRef = ref(null);

const formInline = reactive({
  minimumDuration: null,
  minimumTrackLen: null,
  minimumDays: null,
  outOfBounds: true,
});

const rules = {
  minimumDuration: [
    {
      required: true,
      message: '请输入单次巡护最短时长',
      trigger: 'blur',
    },
  ],

  minimumTrackLen: [{ required: true, message: '请输入单次巡护最短里程', trigger: 'blur' }],
  minimumDays: [{ required: true, message: '请输入每月巡护天数', trigger: 'blur' }],
};

const channelInputLimit = (e) => {
  let key = e.key;

  // 不允许输入'e'
  if (['e', 'E', '-', '+'].includes(key)) {
    e.returnValue = false;

    return false;
  }

  return true;
};

const handleShowModalRules = () => {
  emit('handleShowModalRules', false);
};

const handleClearRule = () => {
  if (formInline.minimumDuration == null) {
    ElMessageBox.confirm('暂无巡护规则，无需清除', '提示', {
      cancelButtonText: '知道了',
      showConfirmButton: false,
      customClass: 'message-ti-shi',
    })
      .then((e) => {
        return e;
      })
      .catch((e) => {
        return e;
      });

    return;
  }

  ElMessageBox.confirm('确定要清除规则吗？', '提示', {
    confirmButtonText: '清除',
    cancelButtonText: '再想一想',
    customClass: 'message-logout',
  })
    .then(() => {
      //!  对接删除接口
      delPatrolRuleApi();
    })
    .catch((e) => {
      return e;
    });
};

const handleSaveRule = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      //! 发布接口

      handleShowModalRules();
    }
  });
};

/*
 *@description:删除巡护规则
 */
const delPatrolRuleApi = () => {
  emit('GetRuleInfo');
};

watch(
  patrolRule,
  () => {
    if (patrolRule.value == null) {
      formInline.minimumDuration = null;
      formInline.minimumTrackLen = null;
      formInline.minimumDays = null;
      formInline.outOfBounds = true;
    } else {
      formInline.minimumDuration = patrolRule.value?.minimumDuration;
      formInline.minimumTrackLen = patrolRule.value?.minimumTrackLen;
      formInline.minimumDays = patrolRule.value?.minimumDays;
      formInline.outOfBounds = patrolRule.value?.outOfBounds;
    }

    // getPatrolRuleApi();
  },
  { deep: true },
);
</script>
<template>
  <CommonMapModal v-model:visible="showModalRules" :width="'632px'" :height="'427px'">
    <template #header> 巡护规则 </template>
    <template #close>
      <div @click="handleShowModalRules">X</div>
    </template>
    <template #body>
      <main>
        <ElForm ref="formRef" label-position="right" :rules="rules" :model="formInline">
          <ElFormItem label="单次巡护最短时长(h):" prop="minimumDuration">
            <ElInputNumber
              v-model="formInline.minimumDuration"
              placeholder="请输入单次巡护最短时长"
              :max="9999"
              :min="0"
              controls-position="right"
              @keydown="channelInputLimit"
            />
          </ElFormItem>

          <ElFormItem label="单次巡护最短里程(km):" prop="minimumTrackLen">
            <ElInputNumber
              v-model="formInline.minimumTrackLen"
              placeholder="请输入单次巡护最短里程"
              :max="9999"
              :min="0"
              controls-position="right"
              @keydown="channelInputLimit"
            />
          </ElFormItem>
          <ElFormItem label="每月巡护天数:" prop="minimumDays">
            <ElInputNumber
              v-model="formInline.minimumDays"
              placeholder="请输入每月巡护天数"
              :max="9999"
              :min="0"
              controls-position="right"
              @keydown="channelInputLimit"
            />
          </ElFormItem>
          <ElFormItem label="是否允许责任区外巡护:">
            <ElRadioGroup v-model="formInline.outOfBounds">
              <ElRadio :label="true">是</ElRadio>
              <ElRadio :label="false">否</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElForm>
      </main>
    </template>
    <template #footer>
      <div class="btn_1" @click="handleClearRule">清除规则</div>
      <div class="btn_2" @click="handleSaveRule">确认</div>
    </template>
  </CommonMapModal>
</template>

<style scoped lang="scss">
.btn_1,
.btn_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px !important;
  height: 44px;
  margin-right: 12px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}
.btn_1 {
  color: #ff8787;
  border: 1px solid #ff8787 !important;
}

.btn_2 {
  color: #ffffff;
  background-color: #669eff;
}
</style>

<style lang="scss">
.message-ti-shi {
  width: 534px !important;
  height: 290px;
  border-radius: 10px;
  .el-message-box__header {
    padding-left: 20px;
    .el-message-box__title {
      color: #333333;
      font-weight: 600;
      font-size: 16px;
      text-align: left;
    }
  }
  .el-message-box__content {
    padding: 40px 50px;
    .el-message-box__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;

      .el-message-box__message {
        color: #333333;
        font-weight: 400;
        font-size: 18px !important;

        p {
          font-size: 18px !important;
          line-height: 32px;
        }
      }
    }
  }
  .el-message-box__btns {
    justify-content: center !important;
    text-align: center;
    .el-button {
      width: 200px;
      height: 40px;
      color: #377bf0;
      background: #e3ecfd;
      border: 1px solid #e3ecfd;
      border-radius: 4px;
      span {
        color: #377bf0;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }
}
.message-logout {
  width: 334px;
  height: 204px !important;
  border-radius: 10px;
  .el-message-box__header {
    padding-left: 20px;
    .el-message-box__title {
      color: #333333;
      font-weight: 600;
      font-size: 16px;
      text-align: left;
    }
  }
  .el-message-box__content {
    .el-message-box__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;

      .el-message-box__message {
        color: #333333;
        font-weight: 400;
        font-size: 14px !important;

        p {
          font-size: 16px !important;
        }
      }
    }
  }
  .el-message-box__btns {
    padding: 18px 70px 0 0;
    text-align: center;
    .el-button {
      width: 85px;
      color: #4682ed;
      border: 1px solid #4682ed;
      border-radius: 4px;
      span {
        color: #4682ed;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .el-button--primary {
      margin-left: 36px;
      background-color: #4682ed;
      border-color: #4682ed;
      span {
        color: #ffffff;
      }
    }
  }
}
.message-reset {
  width: 334px;
  height: 174px;
  border-radius: 10px;
  .el-message-box__header {
    padding-left: 30px;
    .el-message-box__title {
      color: #333333;
      font-weight: 600;
      font-size: 16px;
      text-align: left;
    }
  }
  .el-message-box__content {
    .el-message-box__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;

      .el-message-box__message {
        color: #333333;
        font-weight: 400;
        font-size: 14px;
        p {
          font-size: 16px !important;
        }
      }
    }
  }

  .el-message-box__btns {
    padding: 18px 95px 0 0;
    text-align: center;
    .el-button {
      width: 60px;
      height: 30px;
      color: #4682ed;
      border: 1px solid #4682ed;
      border-radius: 4px;
      span {
        color: #4682ed;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .el-button--primary {
      margin-left: 36px;
      background-color: #4682ed;
      border-color: #4682ed;
      span {
        color: #ffffff;
      }
    }
  }
}
</style>
